---
title: अपने dApp में रेनबो बटन को अपनाना
description: Wagmi के लिए एक प्लग-एंड-प्ले लाइब्रेरी ताकि आपके dApp में रेनबो वॉलेट्स का समर्थन किया जा सके
image: guide-rainbow-button.png
---

# अपने dApp में रेनबो बटन को अपनाना

`RainbowButton` घटक `wagmi` उपयोग करने वाले dApps के लिए रेनबो वॉलेट समर्थन जोड़ने का सबसे सरल तरीका है जो [RainbowKit](https://www.rainbowkit.com/docs/installation) के बजाय एक अधिक कस्टम कनेक्टर अनुभव पसंद करते हैं।

**1. `@rainbow-me/rainbow-button` और इसके पीयर निर्भरताएँ स्थापित करें**

पैकेज Next.js, React, और Vite के साथ संगत है। सुनिश्चित करें कि आप पीयर निर्भरता चेतावनियों का पालन करते हैं।

```bash
npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query
```

**2. Wagmi के साथ कॉन्फ़िगर करें और RainbowButton स्थापित करें**

`rainbowConnector` का एक उदाहरण `projectId` और `appName` के साथ Wagmi के `createConfig` को पास करें, और अपने ऐप को `RainbowButtonProvider` में लपेटें। फिर `RainbowButton` घटक डालें।

```tsx
import '@rainbow-me/rainbow-button/styles.css';
import {
  RainbowButtonProvider,
  RainbowButton,
  rainbowConnector,
} from '@rainbow-me/rainbow-button';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'viem/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = createConfig({
  connectors: [
    rainbowConnector({
      appName: 'RainbowKit demo',
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          <RainbowButton />
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

आप कस्टम कार्यान्वयन और स्टाइलिंग के लिए `RainbowButton.Custom` घटक का भी उपयोग कर सकते हैं।

```tsx
<RainbowButton.Custom>
  {({ ready, connect }) => {
    return (
      <button
        type="button"
        disabled={!ready}
        onClick={connect}
      >
        Connect Rainbow
      </button>
    );
  }}
</RainbowButton.Custom>
```

**3. और बस!**

अब आपके उपयोगकर्ता रेनबो के लिए एक सहज कनेक्शन अनुभव का आनंद ले सकते हैं - बिना किसी रखरखाव या सिरदर्द के।

यदि आप अतिरिक्त वॉलेट्स के लिए समर्थन अपनाना चाहते हैं, तो [RainbowKit](https://www.rainbowkit.com/docs/installation) में एक [`WalletButton`](https://www.rainbowkit.com/docs/wallet-button) घटक भी उपलब्ध है।
